import React, { useEffect } from 'react'
import Link from 'next/link'
import { useRepoStore } from '@/store/useRepoStore'

const RepositoryList: React.FC = () => {
  const { repositories, fetchRepositories, isLoading, error } = useRepoStore()

  useEffect(() => {
    fetchRepositories()
  }, [fetchRepositories])

  if (isLoading) {
    return (
      <div className="flex justify-center items-center h-64">
        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-green-500"></div>
      </div>
    )
  }

  if (error) {
    return (
      <div
        className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
        role="alert">
        <strong className="font-bold">错误：</strong>
        <span className="block sm:inline">{error}</span>
      </div>
    )
  }

  if (repositories.length === 0) {
    return (
      <div className="text-center py-10">
        <h3 className="text-lg font-medium text-gray-900 dark:text-white">
          暂无仓库
        </h3>
        <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
          您还没有任何仓库，或者没有权限访问任何仓库。
        </p>
      </div>
    )
  }

  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {repositories.map((repo) => (
        <div
          key={repo.id}
          className="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg border border-gray-200 dark:border-gray-700">
          <div className="px-4 py-5 sm:p-6">
            <h3 className="text-lg font-medium text-gray-900 dark:text-white truncate">
              <Link
                href={`/repository/${repo.fullName}`}
                className="hover:underline">
                {repo.name}
              </Link>
            </h3>
            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400 h-12 overflow-hidden">
              {repo.description || '暂无描述'}
            </p>
            <div className="mt-4 flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <span className="inline-flex items-center text-sm">
                  <svg
                    className="h-4 w-4 text-yellow-400"
                    fill="currentColor"
                    viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                  </svg>
                  <span className="ml-1 text-gray-500 dark:text-gray-400">
                    {repo.stargazersCount}
                  </span>
                </span>
                <span className="inline-flex items-center text-sm">
                  <svg
                    className="h-4 w-4 text-gray-400"
                    fill="currentColor"
                    viewBox="0 0 20 20">
                    <path
                      fillRule="evenodd"
                      d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm0 2h10v10H5V5z"
                      clipRule="evenodd"
                    />
                  </svg>
                  <span className="ml-1 text-gray-500 dark:text-gray-400">
                    {repo.forksCount}
                  </span>
                </span>
              </div>
              <span className="text-xs text-gray-500 dark:text-gray-400">
                更新于 {new Date(repo.updatedAt).toLocaleDateString()}
              </span>
            </div>
          </div>
          <div className="bg-gray-50 dark:bg-gray-700 px-4 py-4 sm:px-6">
            <div className="text-sm">
              <Link
                href={`/repository/${repo.fullName}`}
                className="font-medium text-green-600 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300">
                查看仓库
              </Link>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

export default RepositoryList
